import React from 'react';
import classnames from 'classnames';
import css from './index.less';
//import { Menu, Dropdown, Button, Icon, message } from 'antd';
import { Input, InputNumber, Form, Modal, Select, Alert, Button, Col } from 'antd';
const Option = Select.Option;
const InputGroup = Input.Group;
const { TextArea } = Input;
//import { observer, inject, action } from 'mobx-react';
//
//@inject('store')
//@observer
class MyModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      showWarn: false,
      confirmLoading: false,
      name: props.data.c_name || '',
      amount: props.data.c_amount || 0,
      getTimeType: props.data.c_getTimeType || 1,
      url: props.data.c_url || '',
      remark: props.data.c_remark || ''
    };
    this.selected = []
  }

  componentWillReceiveProps(nextProps) {
    //console.log(nextProps);
    this.setState({
      visible: nextProps.modalType !== 0,
      name: nextProps.data.c_name || '',
      amount: nextProps.data.c_amount || 0,
      getTimeType: nextProps.data.c_getTimeType || 1,
      url: nextProps.data.c_url || '',
      remark: nextProps.data.c_remark || ''
    })
  }

  handleOk() {
    const { modalType, editCou = () => {}, addCou = () => {} } = this.props;
    const { name, amount, getTimeType, url, remark} = this.state;
      this.setState({confirmLoading: true});
      const that = this;
      Modal.confirm({
        title: 'Confirm',
        content: '您确认提交您的数据么？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          if(modalType === 1) {
            addCou( name, amount, getTimeType, url, remark);
          }
          if(modalType === 2){
            editCou( name, amount, getTimeType, url, remark)
          }
          that.setState({
            confirmLoading: false,
            visible: false
          });
        },
        onCancel() {
          that.setState({
            confirmLoading: false,
            visible: false
          });
        }
      });
  };

  handleCancel()  {
    this.setState({
      visible: false
    });
  };

  onInputChange(value, type) {
    //console.log(value, type);
    this.setState((state) => {
      state[type] = value;
    });
  }

  render() {
    const {
      visible, confirmLoading, showWarn, name = '', amount = 0, getTimeType = 1, url = '', remark = ''
      } = this.state;
    const { modalType } = this.props;
    //console.log('getTimeType', getTimeType)
    const modalProps = {
      title: modalType === 1 ? '添加优惠券' : '修改优惠券',
      visible,
      confirmLoading,
      onOk: this.handleOk.bind(this),
      onCancel: this.handleCancel.bind(this)
    };
    return (
      <Modal {...modalProps}>
        <div className={css.editBox}>
          <form action="">
            <InputGroup className={css.inuptBox} size="large">
              <Col span={3}>
                <h4>名称：</h4>
              </Col>
              <Col span={21}>
                <Input className={css.inputNum} value={name} onChange={e => {this.onInputChange(e.target.value, 'name')}}/>
              </Col>
            </InputGroup>
            <InputGroup className={css.inuptBox} size="large">
              <Col span={3}>
                <h4>数量：</h4>
              </Col>
              <Col span={21}>
                <InputNumber className={css.inputNum} value={amount} onChange={value => {this.onInputChange(value, 'amount')}}/>
              </Col>
            </InputGroup>
            <InputGroup className={css.inuptBox} size="large">
              <Col span={3}>
                <h4>类型：</h4>
              </Col>
              <Col span={21}>
                <Select value={getTimeType == 1 ? '普通' : '优质'} className={css.inputNum} onChange={value => {this.onInputChange(value, 'getTimeType')}}>
                  <Option value="1">普通</Option>
                  <Option value="2">优质</Option>
                </Select>
              </Col>
            </InputGroup>
            <InputGroup className={css.inuptBox} size="large">
              <Col span={3}>
                <h4>链接：</h4>
              </Col>
              <Col span={21}>
                <Input className={css.inputNum} value={url} onChange={e => {this.onInputChange(e.target.value, 'url')}}/>
              </Col>
            </InputGroup>
            <InputGroup className={css.inuptBox} size="large">
              <Col span={3}>
                <h4>备注：</h4>
              </Col>
              <Col span={21}>
                <Input className={css.inputNum} value={remark} onChange={e => {this.onInputChange(e.target.value, 'remark')}}/>
              </Col>
            </InputGroup>
          </form>
        </div>
      </Modal>
    );
  }
}

export default MyModal;
